<template>
  <view>
    <!-- 上面tab栏 -->
    <view
      style="width: 100%; border-bottom: 0 none; position: fixed; z-index: 2"
    >
      <view style="background: #ffffff; position: relative">
        <view class="h-tab vp-flex">
          <view
            :class="'h-tab-item vp-flex_1 ' + (filt == '' ? 'on' : '')"
            data-filt=""
            @tap="onFilterChange"
            >全部</view
          >
          <view
            :class="'h-tab-item vp-flex_1 ' + (filt == 1 ? 'on' : '')"
            data-filt="1"
            @tap="onFilterChange"
            >待支付</view
          >
          <view
            :class="'h-tab-item vp-flex_1 ' + (filt == 2 ? 'on' : '')"
            data-filt="2"
            @tap="onFilterChange"
            >待服务</view
          >
          <view
            :class="'h-tab-item vp-flex_1 ' + (filt == 3 ? 'on' : '')"
            data-filt="3"
            @tap="onFilterChange"
            >已完成</view
          >
          <view
            :class="'h-tab-item vp-flex_1 ' + (filt == 4 ? 'on' : '')"
            data-filt="4"
            @tap="onFilterChange"
            >已取消</view
          >
        </view>
      </view>
    </view>
    <!-- 中间留白 -->
    <view style="height: 100rpx"></view>
    <!-- 下面订单页面 -->
    <block v-if="list != null">
      <!-- 没有订单列表显示的数据 -->
      <view
        v-if="list != null && list.length == 0"
        style="padding: 40rpx 40rpx 40rpx 40rpx; text-align: center"
      >
        <image
          src="/static/resource/images/empty.png"
          mode="widthFix"
          style="width: 200rpx"
        />
        <view class="f5">没有相关内容~</view>
      </view>
      <!-- 有订单列表显示的数据 -->
      <view v-else class="od-list">
        <block v-for="(item, index) in list" :key="index">
          <view
            class="od-item"
            @tap="toOrder(item.out_trade_no)"
            :data-id="item.out_trade_no"
          >
            <view class="weui-cell weui-cell_access">
              <view class="weui-cell__hd">
                <view>
                  <image
                    :src="item.service_logo_image_url"
                    mode="widthFix"
                    class="od-logo"
                    style="width: 100rpx; height: 100rpx; margin-right: 20rpx"
                  />
                </view>
              </view>
              <view class="weui-cell__bd">
                <view>
                  <text style="font-weight: bold">{{ item.service_name }}</text>
                </view>
                <view class="od-info">
                  <block v-if="item.service_stype <= 20">
                    <view>
                      <text
                        >{{ item.hospital_name }}（{{ item.area_name }}）</text
                      >
                    </view>
                    <view>
                      预约时间：
                      <!-- <formater
                        :timestamp="item.starttime"
                        format="MM-dd hh:mm"
                      ></formater> -->
                      {{ dayjs(item.starttime).format('MM-DD hh:mm') }}
                    </view>
                    <view>
                      就诊人员：
                      <text>{{ item.client_name }}</text>
                    </view>
                  </block>
                  <block
                    v-if="item.service_stype > 20 && item.service_stype < 100"
                  >
                    <view>
                      <text
                        >{{ item.hospital_name }}（{{ item.area_name }}）</text
                      >
                    </view>
                    <view>
                      处理时间：
                      <!-- <formater
                        :timestamp="item.starttime"
                        format="MM-dd hh:mm"
                      ></formater> -->
                      {{ dayjs(item.starttime).format('MM-dd hh:mm') }}
                    </view>
                  </block>
                  <block v-if="item.service_stype > 100">
                    <view>
                      服务时间：
                      <formater
                        :timestamp="item.starttime"
                        format="MM-dd hh:mm"
                      ></formater>
                    </view>
                    <view>
                      服务对象：
                      <text>{{ item.client_name }}</text>
                    </view>
                    <!-- <view>服务地址：<text>{{item.address.address}}</text> </view> -->
                  </block>
                </view>
              </view>
              <view class="weui-cell__ft">
                <!-- 待付款 -->
                <block v-if="item.trade_state == '待支付'">
                  <view style="color: #ffa200"><text>待支付</text></view>
                  <view style="color: #ffa200">
                    <counter
                      style="font-size: 24rpx"
                      :second="item._exp_time"
                      @counterOver="onCounterOver"
                    />
                  </view>
                </block>
                <!-- 进行中 -->
                <block v-if="item.trade_state == '待服务'">
                  <view style="color: #1da6fd"><text>待服务</text></view>
                </block>
                <!-- 已完成 -->
                <block v-if="item.trade_state == '已完成'">
                  <view style="color: #21c521"><text>已完成</text></view>
                </block>
                <!-- 已取消 -->
                <block v-if="item.trade_state == '已取消'">
                  <view style="color: #999999"><text>已取消</text></view>
                </block>
              </view>
            </view>
          </view>
        </block>
      </view>
    </block>
  </view>
</template>

<script setup>
import navbar from '../../compontents/navbar/navbar'
import formater from '../../compontents/formater/formater'
import counter from '../../compontents/counter/counter'
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import dayjs from 'dayjs'
// 订单列表数据
const list = ref([])
const app = getApp()
// 获取订单列表数据
const getOrderList = () => {
  app.globalData.utils.request({
    url: '/order/list',
    method: 'GET',
    header: {
      token: uni.getStorageSync('token')
    },
    data: {
      state: filt.value
    },
    success: res => {
      // console.log('获取订单列表数据成功', res)
      list.value = res.data.data
    },
    fail: res => {
      // console.log('获取订单列表数据失败', res)
      uni.showToast({
        title: res.msg,
        icon: 'none',
        duration: 1000
      })
    }
  })
}
// 因为不是页面销毁  就是显示与隐藏
onShow(() => {
  filt.value = app.globalData.order_filt
  console.log('filt.value', filt.value)
  getOrderList()
})
const filt = ref() //设置tab栏绑定的数据
// 切换 tab 栏
const onFilterChange = e => {
  console.log(e, 'onFilterChange')
  const { filt: crrentFilt } = e.currentTarget.dataset
  filt.value = crrentFilt
  getOrderList()
}
// 点击跳转订单页面
const toOrder = orderId => {
  uni.navigateTo({
    url: '/pages/order/order?oid=' + orderId
  })
}
// 待付款到期时间 重新发送请求 因为订单状态会变
const onCounterOver = () => {
  getOrderList()
}
</script>

<style></style>
